<template>
  <div id="secondEchartsleft" class="homeEchartsClass"></div>
</template>

<script>
import * as echarts from "echarts";
import{getChartData} from '@/api/charts'
export default {
  data() {
    return {
       seriesData:[]
    };
  },
  created(){
     getChartData().then((res)=>{
      console.log(res);
      this.seriesData=res.testData
     })
  },
  mounted() {
 this.$nextTick(() => {
    this.myChart = echarts.init(document.getElementById("secondEchartsleft"));

  })
  window.addEventListener("resize", () => {
  	// 判断是否存在，直接调用resize方法
    if (this.myChart) this.myChart.resize()
  })
  

    let chartDom = document.getElementById("secondEchartsleft");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      color: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#E8684A"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      
      },
      legend: {
        itemHeight: 10,
        itemWidth: 10,
        itemGap: 20,
        orient: "horizontal",
        bottom: 0,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "8%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        axisTick: {
          show: false,
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series:this.seriesData
    };

    option && myChart.setOption(option);
  },
      watch: {
   "$store.state.app.sidebar.opened"() {
       setTimeout(() => {
           this.myChart.resize()
       }, 300)
   }
}
};
</script>

<style lang='scss' scoped>
.homeEchartsClass {
  width: 100%;
  height: 100%;
}
</style>

